<template>
  <div class="Videomonitoring_page">
    <div class="page_box">
      <div class="page_content">
        <!-- 左边 -->
        <div class="left_box">
          <p><img src="~@/assets/images/vedioicon1.png" />湘潭分输站</p>
          <el-tree
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
            :render-content="renderContent"
          ></el-tree>
          <p><img src="~@/assets/images/vedioicon2.png" />高后果区</p>
          <el-tree
            :data="data2"
            :props="defaultProps"
            @node-click="handleNodeClick"
             :render-content="renderContent"
          ></el-tree>
        </div>
        <!-- 右边 -->
        <div class="right_box">
          <div class="tabs">
            <div class="left_tabs">
              <p v-for="(item, index) in tabs" :key="index" :class="activenum==index?'activeitem':''" @click="tapitem(index)">
              {{ item }}
            </p>
            </div>
            <div class="right_tabs">
              <p :class="activeicon==0?'activeicon':''" @click="activeicon=0">
                <img src="~@/assets/images/v1.png">
              </p>
              <p :class="activeicon==1?'activeicon':''" @click="activeicon=1">
                 <img src="~@/assets/images/v2.png">
              </p>
              <p :class="activeicon==2?'activeicon':''" @click="activeicon=2">
                 <img src="~@/assets/images/v3.png">
              </p>
            </div>
          </div>
          <div class="right_content">
            <div :style="{width:videolist.length==4?'1400px':'1400px'}">
              <p v-for="(item,index) in videolist" :key="index" :style="{width:videolist.length==4?'31%':'31.5%',height:videolist.length==4?'47%':'31%'}"></p>
            </div>
          </div>
          <!-- 分页组件 -->
          <div class="pagination-container">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[1,4, 6]"
              :page-size="pageSize"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template><script>
export default {
  data() {
    return {
        img1:require("@/assets/images/wend.png"),
        img2:require("@/assets/images/shex.png"),
        img3:require("@/assets/images/edit.png"),
        img4:require("@/assets/images/delete.png"),
      videolist:[{},{},{},{},{},{},{},{},{}],
      activeicon:0,
      activenum:0,
      currentPage: 1, // 当前页
      pageSize: 10, // 每页显示条数
      total: 1000, // 总条目数
      data: [
        {
          label: "邳州站",
          type:"1",
          children: [
            {
              label: "压缩机厂房",
               type:"1",
              children: [
                {
                  label: "三级 1-1-1",
                },
                {
                  label: "压缩机厂房",
                   type:"1",
                  children: [
                    {
                      label: "三级 1-1-1",
                    },
                  ],
                },
              ],
            },
            {
              label: "压缩机厂房",
               type:"1",
              children: [
                {
                  label: "三级 1-1-1",

                },
                {
                  label: "压缩机厂房",
                   type:"1",
                  children: [
                    {
                        type:"2",
                      label: "三级 1-1-1",
                    },
                  ],
                },
              ],
            },
            {
              label: "压缩机厂房",
               type:"1",
              children: [
                {
                  label: "三级 1-1-1",
                },
                {
                  label: "压缩机厂房",
                   type:"1",
                  children: [
                    {
                      label: "三级 1-1-1",
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      data2: [
        {
          label: "邳州站",
          type:"1",
          children: [
            {
              label: "压缩机厂房",
               type:"1",
              children: [
                {
                  label: "三级 1-1-1",
                },
                {
                  label: "压缩机厂房",
                   type:"1",
                  children: [
                    {
                      label: "三级 1-1-1",
                    },
                  ],
                },
              ],
            },
            {
              label: "压缩机厂房",
               type:"1",
              children: [
                {
                  label: "三级 1-1-1",
                },
                {
                  label: "压缩机厂房",
                   type:"1",
                  children: [
                    {
                      label: "三级 1-1-1",
                    },
                  ],
                },
              ],
            },
            {
              label: "压缩机厂房",
               type:"1",
              children: [
                {
                  label: "三级 1-1-1",
                },
                {
                  label: "压缩机厂房",
                   type:"1",
                  children: [
                    {
                      label: "三级 1-1-1",
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      tabs: ["实时视频", "历史视频"],
    };
  },
  methods: {
    handleNodeClick(){},
    tapedit(node, data){
        console.log(node, data)
    },
    tapdelete(node, data){
        console.log(node, data)
    },
    tapitem(index){
      this.activenum=index
    },
      renderContent: function (h, { node, data, store }) {
        /**
            这个addElement等于的是一个自身的索引为0的东西
            我也不晓得这是个啥回来console看看吧
            大概率是一个dom结构或者是新增dom的东西
        */
        let addElement = arguments[0];
        // 这里判断这个rain类型，是和上面 children 有关系
        /*
            反正在最后返回了一个dom元素，一个i标签和俩span标签
            i标签添加个类名是放置icon图标，后面空span不知道干嘛的
            最后一个span是吧你要填写的文字传进去，他拿的是自身的索引为1的里面的
            我懂了，这个索引应该就是参数，这里拿到的是第二个参数中的数据
         */
        if (data.type === "1") {
            return (
                <span>
                <i style={"margin-right:11px; width:16px;height:16px;display:inline-block;background:url("+this.img1+");background-size:100% 100%"}></i>
                <span>{arguments[1].node.label}</span>
                <span></span>
                </span>
            )
        } else {
            return (
                <span>
                <i style={"margin-right:11px;width:16px;height:16px;display:inline-block;background:url("+this.img2+");background-size:100% 100%;" }></i>
                <span>{arguments[1].node.label}</span>
                <i  on-click={() => this.tapedit(node, data)} style={"margin-left:10px;margin-right:6px;width:16px;height:16px;display:inline-block;background:url("+this.img3+");background-size:100% 100%;"}></i>
                <i on-click={() => this.tapdelete(node, data)}  style={"margin-right:11px;width:16px;height:16px;display:inline-block;background:url("+this.img4+");background-size:100% 100%;"} ></i>
                </span>
            )
        }
      },
    // 页面大小改变时触发
    handleSizeChange(val) {
      this.pageSize = val;
      // 可以在这里进行数据请求，获取新的数据
    },
    // 当前页改变时触发
    handleCurrentChange(val) {
      this.currentPage = val;
      // 可以在这里进行数据请求，获取新的数据
    },
  },
};
</script>
<style scoped lang="scss">
@import "@/assets/styles/pagenation.scss";


p {
  margin: 0;
  padding: 0;
}
.Videomonitoring_page{
   width: calc(100% - 40px);
  // padding-top: 51px;
  height: calc(100% - 51px);
  margin-left: 20px;
}
.page_box {
 width: 100%;
  height: 100%;
  background: url("~@/assets/images/content_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left_tabs{
       display: flex;
    align-items: center;
      p {
      background: url("~@/assets/images/bg_normal.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      text-align: center;
      height: 43px;
      line-height: 43px;
      padding: 0 17px;
      color: white;
      margin-right: 13px;
      cursor: pointer;
    }
    .activeitem{
      background: url("~@/assets/images/bg_active.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      text-align: center;
      height: 43px;
      line-height: 43px;
      padding: 0 17px;
      color: white;
      margin-right: 13px;
    }
    }
    .right_tabs{
      display: flex;
      align-items: center;
      p{
        display: flex;
        align-items: center;
        justify-content: center;
        background: url("~@/assets/images/vedioicon3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        text-align: center;
        width: 40px;
        height: 40px;
        margin-left: 20px;
        cursor: pointer;
        img{
          width: 28px;
        }
      }
      .activeicon{
        background: url("~@/assets/images/vedioicon4.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        text-align: center;
        height: 40px;
        line-height: 40px;
      }
    }
  }
  .page_content {
     margin-left: 30px;
    margin-right: 30px;
    padding: 0;
    padding-top: 31px;
    height: calc(100% - 68px);
    display: flex;
    .left_box {
      height: 100%;
      overflow-y: auto;
      margin-right: 24px;
      padding: 0 10px;
      width: 300px;
      background: linear-gradient(
        180deg,
        rgba(2, 68, 102, 0.3),
        rgba(2, 60, 89, 0.3),
        #01121b 100%
      );
      border: 2px solid rgba(31, 198, 255, 0.1);
      color: white;
      p {
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: 20px;
        margin-top: 15px;
        line-height: 32px;
        margin-bottom: 10px;
        img {
          height: 20px;
          margin-right: 4px;
        }
      }
    }
    .right_box {
      width: calc(100% - 324px);
      .right_content {
         border: 2px solid rgba(31, 198, 255, 0.1);
        background: linear-gradient(
          180deg,
          rgba(2, 68, 102, 0.3),
          rgba(2, 60, 89, 0.3),
          #01121b 100%
        );
        width: 100%;
        height: calc(100% - 100px);
        display: flex;
        align-items: center;
        justify-content: center;
        div {
          height: calc(100%  - 61px);
          margin-top: 39px;
          margin-bottom: 22px;
          
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          p {
            max-width: 500px;
            height: 47%;
            background: white;
            margin-right: 22px;
          }
        }
      }
    }
  }
}
::v-deep .el-tree {
  color: white !important;
  line-height: 32px !important;
  background: rgba(2, 60, 89, 0) !important;
}
::v-deep .el-tree-node__content {
    display: flex !important;
    align-items: center !important;
  line-height: 44px !important;
  span{
    display: flex;
    align-items: center;
  }
  &:hover {
    color: white !important;
    line-height: 32px;
    background-color: rgba(2, 60, 89, 0) !important; /* 鼠标悬停时的背景色 */
  }
}
::v-deep .el-tree-node__expand-icon{
    color: white !important;

}
::v-deep .el-tree-node.is-current > .el-tree-node__content {
  color: white !important;
  line-height: 32px !important;
  background-color: rgba(2, 60, 89, 0) !important; //选中
}
::v-deep .is-leaf::before{
    content: "" !important;
}

</style>